<template>
  <view class="field-radio field-form-item">
    <u-form-item :label="label" :required="required" :prop="prop">
      <u-radio-group
        :value="value"
        style="margin: 0"
        :disabled="disabled"
        :size="iconSize"
        :wrap="direction !== 'horizontal'"
        :active-color="color"
        @change="onChange"
      >
        <u-radio v-for="item in dataList" :key="item[props.value]" :name="item[props.value]">
          {{ item[props.label] }}
        </u-radio>
      </u-radio-group>
    </u-form-item>
  </view>
</template>

<script>
import style from 'uni.scss';
import { validateWidget } from '@/utils/validate.js';

export default {
  name: 'fieldRadio',
	options: {
		styleIsolation: 'shared', // 解除样式隔离
	},
  props: {
    label: {
      type: String
    },
    value: {
      type: [Boolean, String, Number]
    },
    color: {
      type: String,
      default: style.primary_color
    },
    iconSize: {
      type: String,
      default: '40rpx'
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    required: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => []
    },
    rules: {
      type: Array
    },
    prop: {
      type: String
    },
    props: {
      type: Object,
      default: () => {
        return {
          value: 'id',
          label: 'name'
        }
      }
    }
  },
  data () {
    return {
      dirty: false,
      errorMessage: ''
    }
  },
  methods: {
    onChange (val) {
      this.$emit('input', val);
      this.$emit('change', val);
      this.dirty = true;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    },
    validateWidget() {
      console.log('validateWidget', this.value, this.rules);
      return new Promise((resolve, reject) => {
        validateWidget(this.rules, this.value).then(res => {
          this.errorMessage = '';
          resolve();
        }).catch(e => {
          this.errorMessage = e;
          resolve(e)
        });
      });
    }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .van-vertical-item + .van-vertical-item {
    margin-top: 16rpx;
  }
  .van-field-radio ::v-deep .van-radio--horizontal {
    margin-right: 0px;
  }
  .van-field-radio ::v-deep .van-radio--horizontal + .van-radio--horizontal {
    margin-left: 32rpx;
  }
	
</style>
<style>
</style>
